import React, {Component} from 'react';
import Numbers from '../../../helpers/Numbers';

import './pages.scss';

class CanvasImpact extends Component {
    constructor(props) {
        super(props);
        this.radius = 40; // 小球半径
        this.width = document.body.scrollWidth - 1; // 画板宽
        this.height = 1200; // 画板高
    }

    componentDidMount() {
        this.draw();
    }

    draw() {
        const c = document.getElementById("elastic-ball");
        const ctx = c.getContext("2d");
        let random = Math.random();
        const isTrue = Numbers.random(0, 1);
        let k = isTrue === 1 ? random : -random; // 斜率

        let initial_x = this.radius;
        let b = 200;
        let direction = k > 0 ? 1 : 2; // 小球运行方向
        let y;

        const ss = setInterval(() => {
            // 清空画板
            ctx.clearRect(0, 0, this.width, this.height);
            ctx.beginPath();
            // 一元一次函数 计算小球运行轨迹
            y = k * initial_x + b;
            ctx.arc(initial_x, y, this.radius, 0, Math.PI * 2, true);
            ctx.fill();
            // 小球四个方向，当遇到边界时根据 k 反弹
            switch(direction) {
                case 1:
                    initial_x++;
                    if (initial_x >= this.width - this.radius) {
                        direction = 2;
                        k = k < 0 ? k : -k;
                        b = 2 * y - b;
                    }
                    if (y >= this.height - this.radius) {
                        direction = 4;
                        k = k < 0 ? k : -k;
                        b = this.height - this.radius - k * initial_x;
                    }
                    break;
                case 2:
                    initial_x--;
                    if (initial_x <= this.radius) {
                        direction = 1;
                        k = k > 0 ? k : -k;
                        b = 2 * y - b;
                    }
                    if (y >= this.height - this.radius) {
                        direction = 3;
                        k = k > 0 ? k : -k;
                        b = this.height - this.radius - k * initial_x;
                    }
                    break;
                case 3:
                    initial_x--;
                    if (initial_x <= this.radius) {
                        direction = 4;
                        k = k < 0 ? k : -k;
                        b = 2 * y - b;
                    }
                    if (y <= this.radius) {
                        direction = 2;
                        k = k < 0 ? k : -k;
                        b = this.radius - k * initial_x;
                    }
                    break;
                case 4:
                    initial_x++;
                    if (initial_x >= this.width - this.radius) {
                        direction = 3;
                        k = k > 0 ? k : -k;
                        b = 2 * y - b;
                    }
                    if (y <= this.radius) {
                        direction = 1;
                        k = k > 0 ? k : -k;
                        b = this.radius - k * initial_x;
                    }
                    break;
            }
        },1);
    }


    render() {
        return (
            <div className="elastic-ball" >
                <canvas id="elastic-ball" width={this.width} height={this.height}>
                    您的浏览器不支持 HTML5 canvas 标签。</canvas>
            </div>
        );
    }
}

export default CanvasImpact;
